import {
    Card,
    List,
    Pagination, Tabs,
    Timeline,
} from "antd";
import React from "react";
import {Component} from "react";
import {
    GET_COURSE_LIST,
    GET_COURSE_TAG,
    GET_COURSE_TYPE,
    GET_COURSE_USERS,
    SERVER_PICTURE_URL, USER_HAVED_COURSE
} from "../../api/APIURLDefine";
import {AxioInstance} from "../../api/AxiosHelper";
import {model} from "../../model/model";
import "./index.less";
import KeywordFilterSearchMyCourse from "../../components/KeywordFilterSearchMyCourse";
import {PageData} from "../../model/PageData";
import {inject, observer} from "mobx-react";
import UserStore from '../../stores/UserStore';
import {CheckUserLoginOnly, ResetImageHeight} from "../../utils/Utils";
import GlobalStore from "../../stores/GlobalStore";

interface CourseResourceState {
    dataSource?: PageData<model.Course>;
    currentSelect: number;
    page: number;
    total: number;
    mode: Array<any>;
    userStore?: UserStore;
    globalStore?: GlobalStore;
    studied: number;
}

const {TabPane} = Tabs;

@inject("courseStore", "userStore", "globalStore")
@observer
class MyCourse extends Component<any, CourseResourceState> {
    constructor(props: any) {
        super(props);
        this.state = {
            dataSource: null,
            currentSelect: 0,
            total: 1,
            page: 1,
            studied: 0,
            mode: [{id: '0', tag: "全部"}, {id: '1', tag: "虚拟仿真实验课"}, {id: '2', tag: "互动体验课"}, {id: '3', tag: "文章分享课"}, {
                id: '4',
                tag: "直播课"
            }],


        }
    }

    componentDidMount() {
        setTimeout(() => {
            if (CheckUserLoginOnly()) {
                AxioInstance.get(`${GET_COURSE_USERS}/${this.state.page}/9999`)
                    .then((data: any) => {
                        this.setState({studied: data?.total})
                    });
                AxioInstance.get(`${GET_COURSE_USERS}/${this.state.page}/8`)
                    .then((data: any) => {
                        this.setState({dataSource: data, total: data?.total});
                    });
                const course = this.props.courseStore;
                course.SetPageSize(8);
                course.getMyCourseData();
                course.getStudyRecord();
                course.getExpRecord();
                this.setState({studied: course.data?.records.length})
            }
        }, 300);
        window.onresize = function (e) {
            ResetImageHeight();
        }
    }

    getCourseData(page: number, pageSize) {
        const course = this.props.courseStore;
        AxioInstance.get(`${GET_COURSE_USERS}/${page}/8?tag=${course.courseTag}&type=${course.courseType}&mode=${course.mode}`)
            .then((data: any) => {
                // console.log(data);
                course.SetData(data);
                course.SetTotal(data.total);
            });
        this.setState({page})
    }


    //考试记录
    ExamResult = () => {
        return <div>
            这里是考试结果...
        </div>
    }
    //学习记录
    StudyRecord = () => {
        const course = this.props.courseStore;
        const DOMAIN_NAME = this.props.globalStore.DOMainName;
        return <div className="bottom-right-body">
            <div className="bottom-right-body-timeline">
                <Timeline>
                    {
                        course.studyRecord?.map((element, index) => {
                            return <Timeline.Item key={index}>
                                {element.startTime}
                                <>
                                    <Card
                                        key={index}
                                        bordered={false}
                                        className="bottom-right-body-timeline-card"
                                        bodyStyle={{
                                            padding: 0,
                                            height: "0.8rem",
                                            cursor: "pointer",
                                            background: "white"
                                        }}
                                        style={{backgroundColor: "#ffffff00"}}
                                        onClick={() => {
                                            let path = window.location.origin + `/${DOMAIN_NAME}/course?id=${element.id}`;
                                            window.open(path);
                                        }}
                                    >
                                        <div id="img-container" style={{display: 'flex'}}>
                                            <img
                                                style={{
                                                    objectFit: "cover",
                                                    width: "1.4rem",
                                                    height: "0.77rem",
                                                    borderRadius: "0.04rem",
                                                    marginRight: "0.1rem",
                                                }}

                                                src={SERVER_PICTURE_URL + course.studyRecord[index]?.courseImg}
                                            />
                                            <div style={{width: '2.5rem'}}>
                                                <h3
                                                    className="body-right-history-h3"
                                                >
                                                    {element.courseName}</h3>
                                                <h4
                                                    className="body-right-history-h4"
                                                >{element?.teacherInfo ? `${element.teacherInfo.name} | ${element.teacherInfo.titles}` : `暂无老师信息`}</h4>
                                            </div>
                                        </div>
                                    </Card>
                                </>
                            </Timeline.Item>

                        })
                    }
                </Timeline>
            </div>
        </div>

    }

    //实验记录
    ExpRecord = () => {
        const course = this.props.courseStore;
        return <div className="bottom-right-body">
            <div className="bottom-right-body-timeline">
                <Timeline>
                    {
                        course.expRecord?.map((element, index) => {
                            return <Timeline.Item key={index}>
                                <div style={{display: "flex", justifyContent: "space-between", marginRight: "0.26rem"}}>
                                    <p style={{color: "#999999", marginBottom: "0"}}>{element.startTime}</p>
                                    {/* addId */}
                                    {element?.addId ? <a style={{color: "#3E84FF"}} onClick={() => {
                                        window.location.href = element?.addId
                                    }}>点击下载</a> : <p style={{color: "#999"}}>未生成数据</p>}
                                </div>
                                <div style={{marginRight: "0.26rem"}}>
                                    <p style={{
                                        color: "#333",
                                        marginRight: "0.8rem",
                                        fontSize: "0.16rem"
                                    }}>{element.expName}---实验报告</p>

                                </div>
                                {/* <>
                                    <Card
                                        key={index}
                                        bordered={false}
                                        className="bottom-right-body-timeline-card"
                                        bodyStyle={{
                                            padding: 0,
                                            height: "0.8rem",
                                            cursor: "pointer",
                                            background: "white"
                                        }}
                                        style={{backgroundColor: "#ffffff00"}}
                                        onClick={() => {
                                            let path = window.location.origin + `/${DOMAIN_NAME}/course?id=${element.id}`;
                                            window.open(path);
                                        }}
                                    >
                                        <div id="img-container" style={{display: 'flex'}}>
                                            <img
                                                style={{
                                                    objectFit: "cover",
                                                    width: "1.4rem",
                                                    height: "0.77rem",
                                                    borderRadius: "0.04rem",
                                                    marginRight: "0.1rem",
                                                }}
                                                
                                                src={SERVER_PICTURE_URL + course.studyRecord[index]?.courseImg}
                                            />
                                            <div style={{width: '2.5rem'}}>
                                                <h3
                                                    className="body-right-history-h3"
                                                >
                                                    {element.courseName}</h3>
                                                <h4
                                                    className="body-right-history-h4"
                                                >{element?.teacherInfo ? `${element.teacherInfo.name} | ${element.teacherInfo.titles}` : `暂无老师信息`}</h4>
                                            </div>
                                        </div>
                                    </Card>
                                </> */}
                            </Timeline.Item>

                        })
                    }
                </Timeline>
            </div>
        </div>
    }


    onChange(page, pageSize) {
        this.props.courseStore.SetPage(page);
    }

    render() {
        const course = this.props.courseStore;
        const user = this.props.userStore.userInfo;
        const DOMAIN_NAME = this.props.globalStore.DOMainName;
        const StudyRecord = this.StudyRecord;
        const ExamResult = this.ExamResult;
        const ExpRecord = this.ExpRecord;
        return (
            <div className="background">
                <div className="myCourse-container">
                    <div className='body-left'>
                        <div className='body-left-background'>
                            <div className='body-left-header'>
                                我的课程
                            </div>

                            <div style={{height: '100%', width: '100%', background: "#fff"}}>
                                <KeywordFilterSearchMyCourse
                                    onClickTag={() => {
                                        this.setState({page: 1})
                                    }}
                                    filters={[
                                        {
                                            title: "课程类型",
                                            multiple: false,
                                            keywords: course.types,

                                        },
                                        {
                                            title: "课程标签",
                                            multiple: false,
                                            keywords: course.tags,
                                        }
                                        // ,
                                        // {
                                        //     title: "课程形式",
                                        //     multiple: false,
                                        //     keywords: this.state.mode,
                                        // }
                                    ]}
                                />
                            </div>
                            <div className='course-contents-container'>
                                {
                                    course.data?.records.map((element, index) => {
                                        return <Card
                                            key={index}
                                            bordered={false}
                                            className="course-contents-card"
                                            bodyStyle={{
                                                padding: 0,
                                                cursor: "pointer",
                                                background: "white",
                                                borderRadius: "0.04rem"
                                            }}
                                            onClick={() => {
                                                let path = window.location.origin + `/${DOMAIN_NAME}/course?id=${element.id}`;
                                                window.open(path);
                                            }}
                                        >
                                            <div
                                                style={{
                                                    width: "100%",
                                                    height: "auto",
                                                }}
                                            >
                                                <div
                                                    id="img-container"
                                                    style={{
                                                        width: "100%",
                                                    }}
                                                >
                                                    <img
                                                        style={{
                                                            objectFit: "cover",
                                                            width: "100%",
                                                            height: "100%",
                                                            borderRadius: "0.04rem"
                                                        }}
                                                        onLoad={() => {
                                                            ResetImageHeight();
                                                        }}
                                                        src={SERVER_PICTURE_URL + "/" + element.courseImg}
                                                    />
                                                </div>
                                            </div>

                                            <h3
                                                style={{width: "80%", display: "inline-block"}}
                                                className="body-left-item-h3 hide-text-1-column"
                                            >{element.courseName}</h3>
                                            <h4
                                                style={{
                                                    color: "#666666",
                                                    fontSize: "0.14rem",
                                                    wordWrap: "break-word",
                                                    textOverflow: "ellipsis",
                                                    overflow: "hidden",
                                                    whiteSpace: "nowrap",
                                                    marginLeft: "0.1rem"
                                                }}
                                            >{element?.teacherInfo ? `${element.teacherInfo.name} | ${element.teacherInfo.titles}` : `暂无老师信息`}</h4>
                                        </Card>
                                    })
                                }
                            </div>
                            <div className='body-left-foot'>
                                <Pagination
                                    total={course?.total}
                                    size="small"
                                    current={this.state.page}
                                    pageSize={8}
                                    onChange={this.getCourseData.bind(this)}
                                    style={{float: "right"}}
                                />
                            </div>
                        </div>
                    </div>
                    <div className='body-right'>
                        <div className="body-right-Top">
                            <div style={{display: 'flex', paddingTop: '0.2rem', paddingLeft: '0.4rem'}}>
                                <div style={{width: '1rem', height: '1rem'}}><img
                                    src={user !== null && user.avatarUrl !== null ? `${SERVER_PICTURE_URL}/${user.avatarUrl}` : "./ui/headPic.png"}
                                    style={{width: '100%', height: '100%'}}/></div>
                                <div>
                                    <div style={{
                                        height: '0.5rem',
                                        paddingLeft: '0.2rem',
                                        paddingTop: '0.15rem',
                                        fontSize: '0.2rem',
                                        color: '#707070'
                                    }}>
                                        {this.props.userStore.userInfo?.name}
                                    </div>
                                    <div style={{
                                        height: '0.5rem',
                                        paddingLeft: '0.2rem',
                                        paddingTop: '0.15rem',
                                        fontSize: '0.2rem',
                                        color: '#707070'
                                    }}>
                                        欢迎回来。
                                    </div>
                                </div>
                            </div>
                            <div style={{width: '100%', height: '1.62rem', display: 'flex'}}>
                                <div style={{width: '50%'}}>
                                    <div style={{
                                        fontSize: '0.28rem',
                                        color: '#707070',
                                        padding: '0.47rem 0rem 0rem 0.87rem'
                                    }}>
                                        200h
                                    </div>
                                    <div style={{
                                        fontSize: '0.2rem',
                                        color: '#707070',
                                        padding: '0.1rem 0rem 0rem 0.77rem'
                                    }}>
                                        在线时长
                                    </div>
                                </div>
                                <div style={{width: '50%', backgroundColor: ''}}>
                                    <div style={{
                                        fontSize: '0.28rem',
                                        color: '#707070',
                                        padding: '0.47rem 0rem 0rem 0.85rem'
                                    }}>
                                        {this.state.studied}
                                    </div>
                                    <div style={{
                                        fontSize: '0.2rem',
                                        color: '#707070',
                                        padding: '0.1rem 0rem 0rem 0.6rem'
                                    }}>
                                        已学习课程
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="body-right-Bottom">
                            <Tabs defaultActiveKey="1">
                                <TabPane tab="学习记录" key="1">
                                    <StudyRecord/>
                                </TabPane>
                                <TabPane tab="考试记录" key="2">
                                    <ExamResult/>
                                </TabPane>
                                <TabPane tab="实验记录" key="3">
                                    <ExpRecord/>
                                </TabPane>
                            </Tabs>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default MyCourse;
